<template>
  <div class="footer" v-if="isMobile">
    <div class="item" v-for="item in list" :key="item.name" @click="itemClick(item)">
      <img class="img" :src="item.img" alt="" />
      <!-- <el-text class="name">{{ item.name }}</el-text> -->
    </div>
  </div>
  <div v-else class="footer2">
    <div class="content">
      <div :class="['item', { active: active == item.type }]" v-for="item in list" :key="item.name" @click="itemClick(item)">
        <!-- <img class="img" :src="item.img" alt="" /> -->
        <text class="name">{{ item.name }}</text>
      </div>
    </div>
  </div>
</template>

<script setup>
import 道路概览 from '@/assets/imgs/道路概览.png'
import 天气状况 from '@/assets/imgs/天气状况.png'
import 周边风景 from '@/assets/imgs/周边风景.png'
import 设备管理 from '@/assets/imgs/设备管理.png'
import 实时直播 from '@/assets/imgs/实时直播.png'
import 首页 from '@/assets/imgs/首页.png'
import 现场直播 from '@/assets/imgs/现场直播.png'
import { computed } from 'vue'
const isMobile = inject('isMobile')
const active = ref('home')
console.log('a',active.value);

const list = [
  {
    type: 'home',
    name: '首页',
    img: 首页,
  },
  {
    type: 'path',
    name: '道路概览',
    img: 道路概览,
  },
  {
    type: 'weather',
    name: '天气状况',
    img: 天气状况,
  },
  {
    type: 'scenery',
    name: '周边风景',
    img: 周边风景,
  },
  // {
  //     id: 'device',
  //     name: '设备管理',
  //     img: 设备管理
  // },
  {
    type: 'video',
    name: '现场直播',
    img: 现场直播,
  },
]

const itemClick = (item) => {
  active.value = item.type 
  console.log('footer',active.value);
  window.dispatchEvent(new CustomEvent('footerClick', { detail: { ...item,active:active.value }  }))
}
</script>

<style scoped lang="scss">
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-h);
  line-height: var(--footer-h);
  background: url('@/assets/imgs/背景.png') no-repeat center / cover;

  display: flex;
  justify-content: space-around;
  align-items: center;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--footer-item-w);
    height: var(--footer-item-h);
    gap: 5px;

    .img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .name {
      font-size: 12px;
    }
  }
}

.footer2 {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  // height: var(--footer-h);
  // line-height: var(--footer-h);

  .content {
    margin: 0 auto;
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    background: #001529;
    color: #fff;
    padding: 8px 12px;

    .item {
      padding: 8px 12px;
      text-wrap: noWrap;
      width: fit-content;
      border: none;
      border-radius: 4px;
      background: rgba(64, 224, 208, 0.1);
      color: #fff;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
    }

    .active {
      background: #40E0D0;
      color: #001529;
    }
  }
}
</style>
